<style>
body{
padding:0;
margin:0;
max-width: 56.25vh;
margin-left:auto;
margin-right:auto;
}
#McCircle {
  cx: 500px;
  cy: 500px;
  r: 300px;
  fill: none;
  stroke: white;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  box-shadow: 0 0 0 3px #d10063;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 10px #fff);
  animation: glow 1s infinite alternate;
}
#McOrbit {
  cx: 500px;
  cy: 200px;
  r: 1vh;
  fill: white;
  stroke: white;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  box-shadow: 0 0 0 3px #000000;
  filter: drop-shadow(0 0 20px #fff);
}

#rotate {
  transform-origin: 50% 50%;
  animation: rotation 3s infinite linear;
}
@keyframes glow {
  from {
    filter: drop-shadow(0 0 4px #fff);
  }
  to {
    filter: drop-shadow(0 0 20px #fff);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

</style>
</head>
<body translate="no" >
  <svg id="gradient" width="100%" height="100vh" viewbox="0 0 1000 1000">

   <defs>
    <path id="title" d="M0,300 Q500,0 1000,300" />
  </defs>
  <g id="rotate">
    <circle id="McCircle" />
    <circle id="McOrbit" />
  </g>
  <g>
  <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i");

  </style>
   <text id="mytxt" x="500" y="600" font-family="Roboto Condensed" fill="#ffffff" alignment-baseline="middle" font-size="300" stroke-width="30" stroke="#ffffff55" text-anchor="middle">70</text>
  </g>
</svg>
<div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
    var myparam="";
	if(myparam.length>0){
	  $('#mytxt').html(myparam);
	}
</script>